{include file="public/header296" /}
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
        <div class="layui-form-item">
          <label class="layui-form-label">标题</label>
          <div class="layui-input-inline">
            <input type="text" name="name" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">关联导航</label>
          <div class="layui-input-inline">
            <select name="nav_id">
              <option value="0">请选择关联的导航</option>
              {volist name="nav_list" id="vo"}
              <option value="{$vo.id}" >{$vo.str|raw}{$vo.name}</option>
              {/volist}
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">内容</label>
          <div class="layui-input-block" id="editor-wrapper">
            <div id="toolbar-container"></div>
            <div id="editor-container"></div>
            <!-- 内容状态 -->
            <p style="background-color: #f1f1f1;">
              所有文字数: <span id="total-length"></span>；
              选中文字数: <span id="selected-length"></span>
            </p>
            <textarea name="content" id="editor-content" style="display: none"></textarea>
          </div>
        </div>
        <div class="layui-form-item layui-hide">
          <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="添加">
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  layui.use(['layer', 'form'], function(){
  var $ = layui.$
          ,form = layui.form;

    // 配置编辑器
    const { createEditor, createToolbar} = window.wangEditor
    const editorConfig = {
      placeholder: '请输入内容',
      onChange(editor) {
        const html = editor.getHtml()
        console.log('editor content', html)

        // 获取内容
        $("#editor-content").val(editor.getHtml())
        // 选中文字字数
        const selectionText = editor.getSelectionText()
        document.getElementById('selected-length').innerHTML = selectionText.length
        // 全部文字字数
        const text = editor.getText().replace(/\n|\r/mg, '')
        document.getElementById('total-length').innerHTML = text.length
      },
      // 上传图片配置
      MENU_CONF: {}
    }
    editorConfig.MENU_CONF['uploadImage'] = {
      server: '{:url("uploadFile/uploadPic")}',
      timeout: 5 * 1000,
      fieldName: 'file',
      meta: { token: 'xxx', path: 'picture' },
      metaWithUrl: true,
      headers: { Accept: 'text/x-json' },
      maxFileSize: 5 * 1024 * 1024,
      limit: 1,

      onSuccess(file, res) {
        console.log('onSuccess---', file, res)
      },
      onFailed(file, res) {
        console.log('onFailed---', file, res)
      },
      onError(file, err, res) {
        console.error('onError---', file, err, res)
      },
    }

    const editor = createEditor({
      selector: '#editor-container',
      html: '',
      config: editorConfig,
      mode: 'default'
    })

    const toolbarConfig = {}
    const toolbar = createToolbar({
      editor,
      selector: '#toolbar-container',
      config: toolbarConfig,
      mode: 'default'
    })
})
</script>
{include file="public/footer" /}